class Firework {
    constructor(height, size) {
        this.x = Math.random() * window.innerWidth;
        this.y = window.innerHeight;
        this.targetY = window.innerHeight - height;
        this.size = size;
        this.velocity = Math.random() * 3 + 4;
        this.particles = [];
        this.exploded = false;
    }

    update() {
        if (!this.exploded) {
            this.y -= this.velocity;
            if (this.y <= this.targetY) {
                this.explode();
            }
        }
        this.particles.forEach(particle => particle.update());
    }

    explode() {
        this.exploded = true;
        for (let i = 0; i < 360; i += 18) {
            this.particles.push(new Particle(
                this.x,
                this.y,
                this.size,
                i * (Math.PI / 180)
            ));
        }
    }

    draw(ctx) {
        if (!this.exploded) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
            ctx.fillStyle = '#fff';
            ctx.fill();
        }
        this.particles.forEach(particle => particle.draw(ctx));
    }
}

class Particle {
    constructor(x, y, size, angle) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.angle = angle;
        this.velocity = Math.random() * 5 + 2;
        this.alpha = 1;
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    }

    update() {
        this.x += Math.cos(this.angle) * this.velocity;
        this.y += Math.sin(this.angle) * this.velocity;
        this.alpha -= 0.01;
        this.velocity *= 0.99;
    }

    draw(ctx) {
        ctx.save();
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.restore();
    }
}

// 初始化画布
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
let fireworks = [];
let heightValue = 300;
let sizeValue = 2;

// 设置画布尺寸
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

// 控制事件监听
document.getElementById('height').addEventListener('input', (e) => {
    heightValue = e.target.value;
    document.getElementById('heightValue').textContent = heightValue;
});

document.getElementById('size').addEventListener('input', (e) => {
    sizeValue = e.target.value;
    document.getElementById('sizeValue').textContent = sizeValue;
});

// 动画循环
function animate() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if (Math.random() < 0.05) {
        fireworks.push(new Firework(heightValue, sizeValue));
    }

    fireworks = fireworks.filter(firework => {
        firework.update();
        firework.draw(ctx);
        return !firework.exploded || firework.particles.some(p => p.alpha > 0);
    });

    requestAnimationFrame(animate);
}

animate();
